<template>
  <div>
    <!-- <el-alert type="info" show-icon> </el-alert> -->
    <el-alert
      :title="title"
      type="info"
      :closable="false"
      show-icon
      style="margin-bottom: 10px;"
    >
    </el-alert>
    <!-- 表格数据区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template slot-scope="scope">
          {{ formateQuestionType(scope.row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="300">
        <template slot-scope="scope">
          <div v-html="scope.row.question"></div
        ></template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="120">
        <template slot-scope="scope">
          {{ scope.row.addDate | formatTimes }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="scope">
          {{ formateDifficulty(scope.row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template slot-scope="scope">
          {{ formateChkState(scope.row.chkState) }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="120">
        <template slot-scope="scope">
          {{ formatePublishState(scope.row.publishState) }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="210">
        <template slot-scope="scope">
          <el-button @click="getQuestions(scope.row)" type="text" size="small"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.chkState === 0 ? false : true"
            @click="audit(scope.row)"
            >审核</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="$router.push(`/questions/new?id=${scope.row.id}`)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="setPublishState(scope.row)"
            >{{ scope.row.publishState == 0 ? '上架' : '下架' }}</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.publishState == 0 ? false : true"
            @click="removeList(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="objList.page"
      :page-sizes="[3, 5, 10, 12]"
      :page-size="objList.pagesize"
      layout=" prev, pager, next, sizes, jumper"
      :total="total"
      style="text-align: right"
    >
    </el-pagination>
    <!-- 弹出预览对话框 -->
    <diaLogDetail
      :dialogVisible.sync="dialogVisible"
      :id="id"
      v-if="dialogVisible"
    ></diaLogDetail>
    <!-- 审核弹出框区域 -->
    <el-dialog title="题目审核" :visible.sync="dialogVisibleRadio" width="30%">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-radio-group v-model.number="form.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            v-model="form.chkRemarks"
            placeholder="请填写审核意见"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleRadio = false">取 消</el-button>
        <el-button type="primary" @click="choiceCheckClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import 'animate.css'
import {
  questionType,
  difficulty,
  chkType,
  publishType
} from '@/api/hmmm/constants.js'
import {
  choice,
  choicePublish,
  remove,
  choiceCheck
} from '@/api/hmmm/questions.js'
import diaLogDetail from '@/module-hmmm/pages/components/diaLogDetail.vue'
export default {
  name: 'tableCut',
  components: { diaLogDetail },
  data () {
    return {
      form: {
        id: '',
        chkRemarks: '',
        chkState: 1
      },
      dialogVisibleRadio: false,
      objList: {
        page: 1,
        pagesize: 10
        // chkState: 0
      },
      id: '',
      dialogVisible: false,
      state: {
        id: '',
        publishState: ''
      },
      total: 0,
      tableData: []
    }
  },
  created () {
    this.getChoice() // 获取列表最新数据
  },
  computed: {
    title () {
      return `数据一共${this.total}条`
    }
  },
  watch: {},
  methods: {
    //  审核对话框确认按钮
    async choiceCheckClick () {
      if (this.form.chkRemarks === '') {
        return this.$message.warning('请输入审核意见!')
      } else {
        await choiceCheck(this.form)
        this.dialogVisibleRadio = false
        this.form = {
          id: '',
          chkRemarks: '',
          chkState: 1
        }
        this.getChoice()
      }
    },
    // 审核对话框
    audit (row) {
      this.dialogVisibleRadio = true
      this.form.id = row.id
    },
    // 弹出预览对话框
    getQuestions (data) {
      this.id = data.id
      this.dialogVisible = true
    },
    // 删除题库数据
    removeList (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          await remove(data)
          this.getChoice()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 上架和下架
    setPublishState (data) {
      const flag = data.publishState === 0 ? '上架' : '下架'
      this.$confirm(`您确认${flag}这道题目吗?, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: `已${flag}成功!`
          })
          if (data.publishState == 0) {
            return (data.publishState = 1)
          }
          if (data.publishState == 1) {
            return (data.publishState = 0)
          }
          this.state.id = data.id
          this.state.publishState = data.publishState
          await choicePublish(this.state)
          this.getChoice()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: `已取消${flag}!`
          })
        })
    },
    // 格式化题型
    formateQuestionType (num) {
      const item = questionType.find(it => it.value === num)
      if (item) {
        return item.label
      } else {
        return '不能确定'
      }
    },
    // 格式化难度
    formateDifficulty (num) {
      const item = difficulty.find(it => it.value == num)
      if (item) {
        return item.label
      } else {
        return '不能确定'
      }
    },
    // 格式化审核状态
    formateChkState (num) {
      const item = chkType.find(it => it.value == num)
      if (item) {
        return item.label
      } else {
        return '不能确定'
      }
    },
    // 格式化发布状态
    formatePublishState (num) {
      const item = publishType.find(it => it.value == num)
      if (item) {
        return item.label
      } else {
        return '不能确定'
      }
    },
    // 获取全部题目列表
    async getChoice () {
      const res = await choice(this.objList)
      this.total = res.data.counts
      this.tableData = res.data.items
    },
    // 分页
    handleSizeChange (val) {
      this.objList.pagesize = val
      this.getChoice()
    },
    handleCurrentChange (val) {
      this.objList.page = val
      this.getChoice()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  text-align: right;
}
</style>
